import { Button } from "antd";
import { Route, Routes, useNavigate } from "react-router-dom";
import { Controller } from "./Controllers";
import React from "react";

/** 
 * @key 7cda7211-6d13-41d2-82bc-9eb44cc922b4
 * @title 例子1
 * @icon I202004131529
 * @tag t1,t2,t3,t4
 * @description 这是一个例子
 * */
export default function Demo1() {

    const controller = React.useMemo(() => new Controller(), [])

    const navigate = useNavigate()

    return (
        <Controller.Context.Provider value={controller}>
            <div>
                <Button onClick={() => { navigate('bb1') }} >/bb1</Button>
                <Button onClick={() => { navigate('bb2') }} >/bb2</Button>
                <Button onClick={() => { navigate('bb3') }} >/bb3</Button>
                <Button onClick={() => { navigate('bb4') }} >/bb4</Button>
                <Button onClick={() => { navigate('../22') }} >/22</Button>
                <Routes>
                    <Route path="bb1" element={<div>bb1</div>} />
                    <Route path="bb2" element={<div>bb2</div>} />
                    <Route path="bb3" element={<div>bb3</div>} />
                    <Route path="bb4" element={<div>bb4</div>} />
                </Routes>
            </div>
        </Controller.Context.Provider>
    );
}

